<template>
  <div class="page-container">
    <div ref="con" class="container-chart">
      <!-- 第一个页面 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seriesData: [],
      chart: "",
    };
  },
  mounted() {
    //页面一加载就调用接口
    this.getData();
    // this.initEchart();
    window.addEventListener('resize',()=>{
      this.screen()
      })
  },
  methods: {
    //封装一个屏幕控制大小的函数
    screen() {
      //改变数据图形的大小
      this.chart.resize();
      //可视宽度
      let width = this.$refs.con.offsetWidth;
      //设置字体的大小号
    
      //字体
      let num = (width / 100) * 6;
      //重新去创建一个配置项
      let option = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
      };
      //重新设置一下配置项
      this.chart.setOption(option);
    },
    getData() {
      this.$axios.get("/CropCoverage").then((res) => {
        //整体数据
        //取出图例数组
        console.log(res, "覆盖面积");
        this.seriesData = res.data.content;
        this.$nextTick(() => {
          this.initEchart();
          this.screen()
        });
      });
    },
    async initEchart() {
      let myChart = this.$echarts.init(this.$refs.con);
      //调用获取地图数据接口
      // this.$axios.get('http://localhost:8080/static/map/geojson.json')
      // .then(res=>{
      //   console.log(res,'地图响应');
      //   //调用注册地图方法
      //   this.$echarts.registerMap('china',res.data)
      // })
      let result = await this.$axios.get(
        "http://localhost:8080/static/map/geojson.json"
      );
      //调用注册地图方法
      this.$echarts.registerMap("china", result.data);
      this.chart = myChart;
      let options = {
        title: {
          text: "各地区农作物覆盖面积",
        },
        tooltip: {
          show: true,
        },
        series: {
          type: "map",
          map: "china",
          data: this.seriesData,
          // zoom:1.2
          // top:'5%',
          // left:"15%",
          // right:"15%",
          // bottom:'20%'
          emphasis:{
            itemStyle:{
              areaColor:'tomato'
            }
          }
        },

        //添加一个视觉映射组件
        visualMap: {
          show: true,
          min: 0,
          max: 500,
          //添加一个手柄
          calculable: true,
          inRange: {
            color: ["#6EABDA", "#2D5A7D"],
          },
        },
      };
      myChart.setOption(options);
    },
  },
};
</script>

